<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      form {
        width: 400px;
        /* border: 10px solid pink; */
        box-shadow: 0 0 20px black;
        padding: 20px;
        margin: 50px auto 0;
        border-radius: 30px;
        text-align: center;
      }

      label {
        display: block;
        height: 80px;
        position: relative;
        font-weight: 800;
      }

      input {
        
        height: 30px;
        font-size: 20px;
        padding-left: 20px;
        border-radius: 10px;
        background-color: rgb(200, 200, 200);
        
      }

      label > span {
        position: absolute;
        left: 91px;
        top: 53px;
        font-size: 20px;
        color: red;
        display: none;
      }
      input:first-child{
        margin-top: 15px;
      }
      input[type='button'] {
        border-radius: 10px;
        color: aliceblue;
        background-color: rgb(25, 25, 239);
        text-align: center;
        cursor: pointer;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <form>
      <label>
        用户名: <input class="username" type="text" />
        <!-- 数字字母开头6～12位 忽略大小写 -->
        <span>请按照规则填写用户名</span>
      </label>
      <label>
        密&nbsp;&nbsp;&nbsp;&nbsp;码: <input class="password" type="text" />
        <!-- 数字字母下划线 6～12位 -->
        <span>请按照规则填写密码</span>
      </label>
      <label>
        手机号: <input class="phone" type="text" />
        <!-- 11位数字即可 -->
        <span>请按照规则填写手机号</span>
      </label>
      <label>
        <!-- 6～12位 开头为数字大小写字母 中间为数字字母下划线均可-->
        <!-- @ 只接收qq 163 sina -->
        <!-- com或者cn -->
        邮&nbsp;&nbsp;&nbsp;&nbsp;箱: <input class="email" type="text" />
        <span>请按照规则填写邮箱</span>
      </label>
      <input type="button" value="完善资料&nbsp;&nbsp;" />
    </form>

    <script>
      let ipt = document.querySelectorAll('input:not(:last-child)');
      let spans = document.querySelectorAll('span')
      let regUsername = /^[0-9a-zA-Z]\w{5,11}$/i;
      let regPassworld = /^\w{6,12}$/;
      let regPhone = /^\d{11}$/;
      let regEmail = /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/;
      let arr=[regUsername,regPassworld,regPhone,regEmail]
      ipt.forEach((ele, index) => {
        ele.oninput = () =>arr[index].test(ele.value)?spans[index].style.display='none':spans[index].style.display='block'
      });
    </script>
  </body>
</html>
